<template>
    <div id="detail_Box">
        <poinfo :info="info"></poinfo>
        <!--echartId为每个echart表格的id名称，text1为每个指标的名称，w为宽度，h为高度-->
        <!--第一个指标详情-->
        <Collapse v-model="value1">
            <Row>
                <Col span="8"><echart text1="指标1" echartId="chart1"  :h=chartHeight1></echart></Col>
                <Col span="8"><echart text1="指标4" echartId="chart4" :w=chartWidth1 :h=chartHeight1></echart></Col>
            </Row>
            <Panel name="1">
                详情
                <p slot="content"><poinfo :info="info"></poinfo></p>
            </Panel>
        </Collapse>
        <!--第二个指标详情-->
        <Collapse v-model="value2">
            <Row>
                <Col span="8"><echart text1="指标2" echartId="chart2" :w=chartWidth2 :h=chartHeight2></echart></Col>
            </Row>
            <Panel name="2">
                详情
                <p slot="content"><poinfo :info="info"></poinfo></p>
            </Panel>
        </Collapse>
        <!--第三个指标详情-->
        <Collapse v-model="value3">
            <Row>
                <Col span="8"><echart text1="指标3" echartId="chart3" :w=chartWidth3 :h=chartHeight3></echart></Col>
                <Col span="8"><echart text1="指标5" echartId="chart5" :w=chartWidth3 :h=chartHeight3></echart></Col>
                <Col span="8"><echart text1="指标6" echartId="chart6" :w=chartWidth3 :h=chartHeight3></echart></Col>
            </Row>
            <Panel name="3">
                详情
                <p slot="content"><poinfo :info="info"></poinfo></p>
            </Panel>
        </Collapse>

    </div>
</template>

<script>
    //引入基本信息组件
    import poinfo  from '../../components/PoInfo'
    //引入echart表格组件
    import echart  from '../../components/Echart'
    // 引用iview里的组件
    import {Collapse,Panel,Col,Row} from 'iview'
    export default {
        name: "PoDetails",
        components:{
            echart,
            poinfo,
            Collapse,
            Panel,
            Col,
            Row
        },
        data(){
            return{
                value1:"1",
                value2:"2",
                value3:"3",
                chartWidth1:"100%",
                chartHeight1:"300px",
                chartWidth2:"100%",
                chartHeight2:"300px",
                chartWidth3:"100%",
                chartHeight3:"300px",
                info:{"name":"网络安全",
                    "PO": "20254556412",
                    "place": "成都",
                    "workload": "100"
                }
            }
        }
    }
</script>

<style scoped>
    #chart1{
        width: 500px;
        height: 500px;
    }
    echart{
        float: left;
    }
    #detail_Box{
        width: 95%;
        border:1px solid yellow;
        margin: 30px auto;
    }
</style>
